<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="css/dialogTheme.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Date Picker Example 2</title>
</head>
<body>
    <p>日期：<input type="text" id="datepicker" size="30"></p>

    <p>动画：
        <select id="anim">
            <option value="show">Show (默认)</option>
            <option value="slideDown">滑下</option>
            <option value="fadeIn">淡入</option>
            <option value="blind">Blind (UI 百叶窗特效)</option>
            <option value="bounce">Bounce (UI 反弹特效)</option>
            <option value="clip">Clip (UI 剪辑特效)</option>
            <option value="drop">Drop (UI 降落特效)</option>
            <option value="fold">Fold (UI 折叠特效)</option>
            <option value="slide">Slide (UI 滑动特效)</option>
            <option value="">无</option>
        </select>
    </p>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
	    $(function() {
            $( "#datepicker" ).datepicker();
            $( "#anim" ).change(function() {
                $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
            });
        });
	</script>
</body>
</html>
